package icu.twtool.ui.view

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.onClick
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerHoverIcon
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import icu.twtool.ui.component.TabList
import icu.twtool.ui.router.RouteState
import icu.twtool.ui.style.MyCursor

/**
 * @author Wen
 * @since 2022-11-02
 */
@Composable
@Suppress("FunctionName")
@OptIn(ExperimentalFoundationApi::class)
fun LeftView(state: RouteState, onClose: () -> Unit = {}) {
    Column(modifier = Modifier.width(150.dp).padding(vertical = 16.dp)) {
        val logoIcon = painterResource("icons/logo.svg")
        val closeIcon = painterResource("icons/close.svg")
        Image(
            logoIcon, null,
            modifier = Modifier.size(48.dp).align(Alignment.CenterHorizontally)
        )
        TabList(state.items, state.active) {
            state.active = it
        }
        Image(closeIcon, null,
            modifier = Modifier.padding(start = 16.dp).onClick { onClose() }.pointerHoverIcon(MyCursor.HandCursor)
        )
    }
}